<template>
	<view>
		<u-line color="info"></u-line>
		<view class="client-list-leave-range fillx frsc bsp10 t-bb-u">
			<view class="client-list-leave-choose-market">
				<u-dropdown :isShowMask_bgc="false">
					<u-dropdown-item v-model="chooseMarket" :title="finalMarket" :options="marketList" @change="changeMarket" shape="square" @clear="clear"></u-dropdown-item>
				</u-dropdown>
			</view>
			<u-search placeholder="姓名/手机号" v-model="keyword" :clearabled="true" :animation="true" bg-color="#eeeeee" shape="square" border-color="#dddddd" @search="toSearch" @custom="toSearch"></u-search>
		</view>
		<view class="client-list-leave-sort frcc fillx t-bb-u">
			<view class="client-list-leave-level ha frcc"  @click="toSort('level')">
				级别
				<view class="iconfont icon-shangxiajiantou"></view>
			</view>
			<view class="client-list-leave-register-time ha frcc" @click="toSort('leave_time')">
				流失时间
				<view class="iconfont icon-shangxiajiantou"></view>
			</view>
		</view>
		<view class="client-list-leave-content fillx fcss">
			<view class="client-item fillx frcc" v-for="item in isSearch?searchList:showList" :key="item.id">
				<image class="client-item-img" src="../../../../static/logo.png" mode="widthFix"></image>
				<view class="client-item-message fcss">
					<view class="client-item-message-name fillx frcc">
						{{item.name}}
						<text>{{item.phone_code}}</text>
					</view>
					<view class="client-item-message-level fillx frcc">
						级别：
						<text>{{level_List[item.level-1]}}</text>
					</view>
					<view class="client-item-message-register-time fillx frcc">
						最后登录时间：
						<text>{{item.leave_time}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-empty class="client-list-leave-empty" text="没有搜索结果" mode="search" :show="isShowEmpty"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseMarket:1,
				marketList: [
					{label: '全部',value: 1,},
					{label: '第一市场',value: 2,},
					{label: '第二市场',value: 3,},
					{label: '第三市场',value: 4,}
				],
				keyword:'',
				clientList:[
					{id:'abf1',name:'黄飞鸿',phone_code:'13346784260',level:1,leave_time:'2020-10-16',market_number:1},
					{id:'abf2',name:'张无忌',phone_code:'13846782359',level:3,leave_time:'2020-10-10',market_number:2},
					{id:'abf3',name:'张三丰',phone_code:'15315586158',level:4,leave_time:'2019-09-16',market_number:3},
					{id:'abf4',name:'十三姨',phone_code:'13656785657',level:1,leave_time:'2020-08-13',market_number:2},
					{id:'abf5',name:'周伯通',phone_code:'13486034556',level:2,leave_time:'2020-07-26',market_number:3},
					{id:'abf6',name:'黄蓉',phone_code:'18286714955',level:2,leave_time:'2019-11-16',market_number:1},
					{id:'abf7',name:'杨过',phone_code:'15415781554',level:1,leave_time:'2019-10-09',market_number:1},
					{id:'abf8',name:'小龙女',phone_code:'15976782453',level:1,leave_time:'2020-02-02',market_number:2},
					{id:'abf9',name:'郭靖',phone_code:'18678881211',level:3,leave_time:'2019-09-29',market_number:3},
					{id:'abf10',name:'小鱼儿',phone_code:'15325785951',level:2,leave_time:'2020-05-15',market_number:1},
					{id:'abf11',name:'花无缺',phone_code:'17464480950',level:2,leave_time:'2020-07-16',market_number:1}
				],
				level_List:['普通会员','黄金会员','铂金会员','钻石会员'],
				level_sort:true,
				leave_time_sort:true,
				showList:[],
				isSearch:false,
				searchList:[],
				isShowEmpty:false
			}
		},
		methods: {
			changeMarket(e){
				this.chooseMarket=e
				uni.showToast({
					title:'选择了'+this.finalMarket,
					icon:'none',
					duration:1000
				})
			},
			toSort(type){
				if(type==='level'){
					if(this.level_sort){
						if(this.isSearch){
							this.searchList.sort((a,b)=>a[type]-b[type])
						}else{
							this.showList.sort((a,b)=>a[type]-b[type])
						}
						this.level_sort=false
					}else{
						if(this.isSearch){
							this.searchList.sort((a,b)=>b[type]-a[type])
						}else{
							this.showList.sort((a,b)=>b[type]-a[type])
						}
						this.level_sort=true
					}
				}else{
					if(this.leave_time_sort){
						if(this.isSearch){
							this.searchList.sort((a,b)=>new Date(a[type])-new Date(b[type]))
						}else{
							this.showList.sort((a,b)=>new Date(a[type])-new Date(b[type]))
						}
						this.leave_time_sort=false
					}else{
						if(this.isSearch){
							this.searchList.sort((a,b)=>new Date(b[type])-new Date(a[type]))
						}else{
							this.showList.sort((a,b)=>new Date(b[type])-new Date(a[type]))
						}
						this.leave_time_sort=true
					}
				}
			},
			filterList(list,key,value){
				return list.filter(a=>a[key]===value)
			},
			toSearch(e){
				if(e===''){
					this.isSearch=false
				}else{
					this.isSearch=true
					let reg_number=/^[0-9]\d*$/g
					let reg_string=/^[\u4e00-\u9fa5]+$/g
					if(reg_number.test(e)){
						this.searchList=this.showList.filter(a=>a.phone_code.slice(0,e.length)===e)
					}else if(reg_string.test(e)){
						this.searchList=this.showList.filter(a=>a.name.slice(0,e.length)===e)
					}else{
						this.isShowEmpty=true
						uni.showToast({
							title:'请输入正确的姓名和手机号',
							icon:'none',
							duration:1000
						})
					}
				}
			},
			clear(){
				console.log('clear')
				this.isSearch=false
			}
		},
		computed:{
			finalMarket(){
				return this.marketList[this.chooseMarket-1].label
			}
		},
		watch:{
			chooseMarket(){
				let cm=this.chooseMarket-1
				/* if(this.isSearch){
					this.searchList=cm===0?this.searchList:cm===1?this.filterList(this.searchList,'market_number',cm):cm===2?this.filterList(this.searchList,'market_number',cm):this.filterList(this.searchList,'market_number',cm)
				} */
				this.keyword=''
				this.showList=cm===0?this.clientList:cm===1?this.filterList(this.clientList,'market_number',cm):cm===2?this.filterList(this.clientList,'market_number',cm):this.filterList(this.clientList,'market_number',cm)
			},
			keyword(){
				if(this.keyword===''){
					this.isSearch=false
					this.isShowEmpty=false
				}
			},
			searchList(){
				if(this.isSearch){
					this.searchList.length===0?this.isShowEmpty=true:this.isShowEmpty=false
				}
			},
			showList(){
				if(!this.isSearch){
					this.showList.length===0?this.isShowEmpty=true:this.isShowEmpty=false
				}
			}
		},
		onShow() {
			this.showList=this.clientList
		}
	}
</script>

<style>
	.client-list-leave-choose-market{
		width: 28%;
	}
	.client-list-leave-level,
	.client-list-leave-register-time{
		padding: 20rpx;
	}
	.client-list-leave-level{
		border-right: 1px solid #d7d7d7;
	}
	.client-item{
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid #d7d7d7;
	}
	.client-item-img{
		width: 18vw;
		height: 18vw;
		border-radius: 3vw;
	}
	.client-item-message{
		box-sizing: border-box;
		padding: 0 40rpx;
		flex: 1;
	}
	.client-item-message-name,
	.client-item-message-level,
	.client-item-message-register-time{
		justify-content: space-between;
	}
	.client-list-leave-empty{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
